<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户编辑页面</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body>
<form class="layui-form" method="POST" action="" lay-filter="layui-edit-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" maxlength="10" lay-verify="required|username" autocomplete="off"
                           readonly
                           placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" maxlength="10" lay-verify="name" autocomplete="off" placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" maxlength="18" lay-verify="email" autocomplete="off" placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <div id="ID-tree-demo-showCheckbox"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" lay-verify="phone" autocomplete="off"
                           placeholder="请输入手机号码"
                           class="layui-input" maxlength="11">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" lay-verify="age" maxlength="3" autocomplete="off"
                           placeholder="请输入年龄"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" id="male" checked>
                    <input type="radio" name="sex" value="2" title="女" id="female">
                </div>
            </div>
            <div class="layui-form-item" id="area-picker">
                <label class="layui-form-label">地址</label>
                <input type="hidden" name="area"/>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="province" id="province" class="province-selector" data-value=""
                            lay-filter="province-1" lay-search>
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="city" id="city" class="city-selector" data-value="" lay-filter="city-1" lay-search>
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="county" id="county" class="county-selector" data-value="" lay-filter="county-1"
                            lay-search>
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="hidden" name="avatar"/>
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn" lay-filter="user-upload">
                        <i class="layui-icon layui-icon-upload"></i> 上传头像
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img src="" class="layui-upload-img" id="ID-upload-demo-img"
                                 style="width: 100%; height: 92px;" alt="">
                            <div id="ID-upload-demo-text"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn  layui-btn-sm" lay-submit=""
                    lay-filter="user-edit" id="user-edit">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/layui/layarea.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:src="@{/pear/component/layui/authtree.js}"></script>
<script th:inline="javascript">

    layui.use(['form', 'jquery'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let form = layui.form;
        let upload = layui.upload;
        let layer = layui.layer;
        let $ = layui.$;
        let layarea = layui.layarea;
        let authtree = layui.authtree;
        let checked = parent.departmentList
        let avatar = parent.avatar
        // 渲染
        $.ajax({
            url: baseURL + "department/list",
            type: 'get',
            success: function (res) {
                let trees = authtree.listConvert(res.data, {
                    primaryKey: 'departmentId'
                    , startPid: 0
                    , parentKey: 'parentId'
                    , nameKey: 'departmentName'
                    , valueKey: 'departmentId'
                    , checkedKey: res.data.departmentId
                });
                let list = parent.departmentList;
                console.log(list);

                function setDefaultCheckedNodes(nodes, list) {
                    nodes.forEach(function (node) {
                        if (list.includes(node.value)) {
                            node.checked = true; // 设置该节点为选中状态
                        }
                        if (node.list) {
                            setDefaultCheckedNodes(node.list, list); // 递归处理子节点
                        }
                    });
                }

                // 调用函数设置默认选中的节点
                setDefaultCheckedNodes(trees, list);
                authtree.render('#ID-tree-demo-showCheckbox', trees, {
                    autoWidth: true,
                    openChecked: true,
                    autochecked: false,
                    autoclose: false
                });
                authtree.showDept('#ID-tree-demo-showCheckbox', 1);
                authtree.on('change(#ID-tree-demo-showCheckbox)', function () {
                    // 获取所有已选中节点
                    checked = authtree.getChecked('#ID-tree-demo-showCheckbox');
                });
            }
        })
        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                $("[name=area]").val(res.province + res.city + res.county);
                parent.area = res.province + res.city + res.county
            },

        });
        // 自定义验证规则
        form.verify({
            age: function (value) {
                if (!/^\d+$/.test(value)) {
                    return '年龄必须是有效数字';
                }
                if (value < 1 || value > 150) {
                    return '年龄必须在1到150之间';
                }
            },
        });
        let avatarSize;
        $.ajax({
            url: baseURL + "setting/getSettingValue",
            type: 'get',
            data: {
                settingKey: "AVATAR_SIZE"
            },
            success: function (res) {
                avatarSize = parseInt(res.data, 10)
            }
        })
        // 渲染
        upload.render({
            elem: '#ID-upload-demo-btn',
            url: baseURL + 'user/uploadAvatar',
            size: avatarSize,
            data: {
                userId: parent.userId
            },
            dataType: 'json',
            contentType: 'application/json',
            before: function () {
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                $('#ID-upload-demo-img').attr('src', baseURL + res.data);
                $("[name=avatar]").val(res.data);
                avatar = res.data
                if (res.code === 1000) {
                    return layer.msg('上传成功');
                } else {
                    return layer.msg(res.msg, {icon: 2, time: 2000});
                }
            }
        });
        $(document).ready(function () {
            form.on('submit(user-edit)', function (data) {
                // 获取提交按钮
                let submitButton = $('#user-edit');

                // 禁用按钮，防止重复提交
                submitButton.addClass('layui-btn-disabled').attr('disabled', 'disabled');
                // 将这些值添加到表单数据中
                data.field.userId = parent.userId
                data.field.area = parent.area;
                data.field.departmentIds = checked
                data.field.avatar = avatar
                $.ajax({
                    url: baseURL + 'user/update',
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (result) {
                        console.log(result);
                        if (result.code === 1000) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前页
                                parent.layui.table.reload("user-table"); // 重新加载表格
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                        // 5秒后重新启用按钮
                        setTimeout(function () {
                            submitButton.removeClass('layui-btn-disabled').removeAttr('disabled');
                        }, 5000);
                    }
                })
                return false;
            });
        })
    });
</script>
</body>
</html>
